<template>
	<view>
      <!-- 头部导航 -->
        <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="租赁结算单详情"  left-icon="left"   @clickLeft="backFn" ></uni-nav-bar>
		
		<view class="box_top">
			<view class="application_one">{{data.number}}</view>
			<view class="desc">客户名：{{data.customerName}}</view>
			<view class="desc">签订人：{{data.signRenName}}</view>
			<view class="desc_date">申请日期：{{data.applyDate}}</view>
		</view>
		<view class="customer">
			<view>
				<uni-icons class="icon" type="calendar-filled" size="20" color="#55aaff">
				</uni-icons>
				<span class="name">{{data.customerName}}</span>
			</view>
			<uni-icons type="forward" size="20" color="#ccc"></uni-icons>
		</view>
		<view class="Buttom">
			<view class="left">
			<uni-icons class="icon"size="20" color="#fd9540" type="person-filled"></uni-icons> 
			<span class="name">{{data.signRenName}}</span>
			</view>
			<view class="left">
			<uni-icons class="icon" size="20" color="#55aaff" type="calendar-filled"></uni-icons>
			<span class="name" v-if="data.status==1">正常</span>
			<span class="name" v-if="data.status==2">完结</span>
			 
			</view>
		</view>
		<view class="moneyInfo">
			<view class="top">
				<uni-icons class="icon" size="28" type="settings-filled" color="#fd9540"></uni-icons>
				<span class="name">金额信息</span>
			</view>
					<uni-grid :column="3" :showBorder="false" class="grid">
						<uni-grid-item>
							<text class="text">
								<span>{{data.rentPaid}}</span>
								<span>实收租金</span>
							</text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text">
								<span>{{data.depositPaid}}</span>
								<span>实收押金</span>
							</text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text">
								<span>{{data.refundableDeposit}}</span>
								<span>应退押金</span>
							</text>
						</uni-grid-item>
						
					</uni-grid>
		</view>
		<!-- tab切换 -->
		  <u-tabs :list="list" class="tabs" lineColor="#fd9540" lineWidth="85px" 
					:activeStyle="{ color: '#fd9540', fontWeight: 'bold', transform: 'scale(1.05)'}"
					:current="index"   @change="index=$event.index" ></u-tabs>
		
		<view>
			<view v-if="index==0">
				<u-cell class="bg"> 
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">基础信息</view>
					</template>
				</u-cell>
				<u-cell class="bg" >
						<view slot="title"  >
							<text class="u-cell-text"  >发起人</text>
							<text class="u-cell-text" style="margin-left: 10px;">{{data.sponsorName}}</text>
						</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >业务员</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.salesmanName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >签订人名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.signRenName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >协同人名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.collaboratorName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >申请日期</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.createTime}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >对账单编号</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.number}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >客户名称</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.customerName}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >业务所属公司</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{businessCompany}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >订单编号</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.orderNo}}</text>
					</view>
				</u-cell>
				
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >项目地区</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{projectArea}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >日租金合计</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalDailyRent}}</text>
					</view>
				
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >应收租金</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.rentReceivable}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >租金折让金额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.rentAllowanceAmount}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >折让说明</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.rentAllowanceDescription}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >其他费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalOtherExpenses==0 ? '' :data.totalOtherExpenses}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >应扣费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalDeductibleExpenses==0 ? '' :data.totalDeductibleExpenses}}</text>
					</view>
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >物流费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalLogisticsExpenses==0 ? '' :data.totalLogisticsExpenses}}</text>
					</view>
					
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >维修费用总额</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.totalMaintenanceCost==0 ? '' :data.totalMaintenanceCost}}</text>
					</view>
					
				</u-cell>
				<u-cell class="bg" >
					<view slot="title"  >
						<text class="u-cell-text"  >预估项目毛利</text>
						<text class="u-cell-text" style="margin-left: 10px;">{{data.estimateProjectProfit}}</text>
					</view>
				</u-cell>
				
			</view>
			<view v-if="index==1">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">收取客户其他费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">数量</uni-th>
						<uni-th align="center">单位</uni-th>
						<uni-th align="center">类别总金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.otherExpensesList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.quantity}}</uni-td>
						<uni-td align="center">{{item.unit}}</uni-td>
						<uni-td align="center">{{item.totalAmount}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
			<view v-if="index==2">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">项目应扣费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">单位</uni-th>
						<uni-th align="center">是否已支付</uni-th>
						<uni-th align="center">支付方</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.deductibleExpensesList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.amount}}</uni-td>
						<uni-td align="center">{{item.unit}}</uni-td>
						<uni-td align="center">{{item.hasPaid}}</uni-td>
						<uni-td align="center">{{item.payer}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
			<view v-if="index==3">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">物流及辅料费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">数量</uni-th>
						<uni-th align="center">型号</uni-th>
						<uni-th align="center">日期</uni-th>
						<uni-th align="center">付款单位</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.logisticsExpensesList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.amount}}</uni-td>
						<uni-td align="center">{{item.quantity}}</uni-td>
						<uni-td align="center">{{item.model}}</uni-td>
						<uni-td align="center">{{item.expenseDate}}</uni-td>
						<uni-td align="center">{{item.payer}}</uni-td>
						
					</uni-tr>
					
				</uni-table>
			</view>
			<view v-if="index==4">
				<u-cell class="bg">
					<template #title>
						<view style="font-size: 12px;color: #8c8c8c;">维修、配件费用</view>
					</template>
				</u-cell>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">费用类别</uni-th>
						<uni-th align="center">单位</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">备注</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in data.maintenanceCostList">
						<uni-td align="center">{{item.expenseCategory}}</uni-td>
						<uni-td align="center">{{item.unit}}</uni-td>
						<uni-td align="center">{{item.totalAmount}}</uni-td>
						<uni-td align="center">{{item.remark}}</uni-td>
					</uni-tr>
					
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import {provinceNameList} from '@/api/region/region.js'
	import {getFinalStatementInfoApi} from '@/api/finnalStatement'
	import {getDicts} from'@/api/dictionary/index.js'
	export default {
		data() {
			return {
				index:0,
				data:{},
				list:[
					{name:'基础信息'},
					{name:'收取客户其他费用'},
					{name:'项目应扣费用对象'},
					{name:'物流及辅料费用对象'},
					{name:'维修、配件费用'},
				],
				businessCompanyOptions:[],
				businessCompany:'',//回显业务所属公司
				projectAreaOptions:[],
				projectArea:'',
			};
		},
		onLoad(e) {
			// console.log(e);
			this.getprojectArea()
			this.getBusinessCompany()
			this.initData(e)
			
		},
		methods:{
			async initData(e){
				let res=await getFinalStatementInfoApi(e.id)
				console.log(res);
				this.data=res.data
				this.businessCompany=this.getValue(this.businessCompanyOptions,res.data.businessCompany)
				
				console.log(this.projectAreaOptions,res.data.projectArea);
			},
			// 项目地区
			getprojectArea(){
				provinceNameList().then(response=>{
					let newArr=[]
					newArr=response.rows.map((item,index)=>{
						return {name:item.label,value:item.value}
					})
					this.projectAreaOptions=newArr
					this.projectArea=this.getValu2(newArr,this.data.projectArea)
				})
				
			},
			getBusinessCompany(){
				getDicts('biz_business_company').then(res=>{
					this.businessCompanyOptions=res.data
				})
			},
			getValue(arr,item){
				for(var i=0;i<arr.length;i++){
					if(item==arr[i].dictValue){
						return arr[i].dictLabel
					}
				}
			},
			// 操作菜单
			getValu2(arr,item){
				for(var i=0;i<arr.length;i++){
					if(item==arr[i].value){
						return arr[i].name
					}
				}
			},
			// 返回上一级
			backFn(){
				 uni.navigateBack({delta:1})
			},
		}
	}
</script>

<style lang="scss">
.box_top{
	position: relative;
	min-height: 50px;
	padding: 10px;
	// margin: 10px 5px 0 5px;
	background-color: #fff;
	border-bottom: solid 1px #c3c3c3;
	.application_one{
				  font-size: 16px;
				  font-weight: 600;
				  padding-bottom: 8px;
	}
	.desc{
				  font-size: 12px;
				  color:#8c8b8a;
				 .desc_text{
					 color: #fd9540;
				 }
	}
	.desc_date{
		padding-bottom: 10px;
		font-size: 12px;
		color:#8c8b8a;
	 }
	 
	
}
.customer{
	background-color: #fff;
	min-height: 40px;
	line-height: 40px;
	padding-left: 5px;
	display: flex;
	justify-content: space-between;
	.icon{
		vertical-align: middle;
		margin-right: 10px;
	}
	.name{
		font-size: 13px;
		color: #c3c3c3;
	}
}
.Buttom{
			 border-top: 1px solid #ccc;
			 display: flex;
			 justify-content: space-between;
			min-height: 35px;
			 background-color: #fff;	
			 // margin: 0 5px;
		 .left{
				width: 50%;
				height: 35px;
				line-height: 35px;
				padding-left: 10px;
			 
				.icon,.name{
					vertical-align:middle;
					font-size: 13px;
				 }
				.name{
				padding-left: 10px;
				}
				 
				}
				.left{
					border-right: 1px solid #ccc;
				}
				.right{
					padding-left: 5px;
				}
		}
	
   .moneyInfo{
	   background-color: #fff;
	   min-height: 120px;
	   margin: 10px 0;
	   padding: 10px;
	   .top{
		   .icon,.name{
			   vertical-align:middle;
		   }
		   .icon{
		   	margin-right: 10px;
		   }
		   margin-bottom: 10px;
		   
	   }
	   .grid{
		 display: flex;  
		 justify-content: space-around;
		 .text{
		 	min-height:  100px;
		 	background-color: #f5efef;
		 	margin-right: 5px;
		 	text-align: center;
		 	display: flex;
		 	flex-direction: column;
		 	justify-content: space-around;
		 	border-radius: 10px;
		 	span{
		 		 display: block;
		 		 padding-top: 10px;
		 		 color: #8b8b8b;
		 	}
		 }
	   }
   }
   .tabs{
	   background-color: #fff;
   }
   .bg{
	   background-color: #fff;
   }
   
</style>
